<template lang="html">
  <div class="t-h-center border-wrapper">
    <div class="box">
      <label>输入用户名:</label>
      <Input class="box-input" v-model="username" placeholder="用户名" />
    </div>
    <div class="box">
      <label>输入密码:</label>
      <Input class="box-input" v-model="password" placeholder="密码" />
    </div>
    <div class="box">
      <label>重复输入密码:</label>
      <Input class="box-input" v-model="rePassword" placeholder="密码" />
    </div>
    <div class="box">
      <label>输入邮箱:</label>
      <Input class="box-input" v-model="userMail" placeholder="邮箱" />
    </div>
    <div class="box">
      <label>输入手机:</label>
      <Input class="box-input" v-model="userPhone" placeholder="手机" />
    </div>
    <div class="box">
      <Button type="primary" v-on:click="userRegister()">注册</Button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      userMail: '',
      userPhone: '',
      rePassword: ''
    }
  },
  methods: {
    //      注册方法
    userRegister: function(event) {
      if (this.password !== this.rePassword) {
        this.$Message.error('两次密码不一致')
      } else {
        let sendDate = {
          username: this.username,
          password: this.password,
          userMail: this.userMail,
          userPhone: this.userPhone
        }
        this.$axios.post('/users/register', sendDate).then(data => {
          console.log('TCL: data', data)
          if (data.body.status === 1) {
            alert(data.body.message)
          } else {
            alert(data.body.message)
            this.$router.go(-1)
          }
        })
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.t-h-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
}
.border-wrapper {
  padding: 20px;
  border: 1px solid #2d8cf0;
  border-radius: 8px;
}
.box {
  width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  label {
    flex: 1;
    text-align: right;
    padding-right: 10px;
  }
  &-input {
    flex: 4;
  }
}
</style>
